<!DOCTYPE html>
<html lang="en" dir="auto">

<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, nofollow">
<title>Posts | My New Hugo Site</title>
<meta name="keywords" content="">
<meta name="description" content="Posts - My New Hugo Site">
<meta name="author" content="">
<link rel="canonical" href="http://localhost:1313/posts/">
<link crossorigin="anonymous" href="/assets/css/stylesheet.6da9a63d25a9608bca2f7f907a030e887a7dd3c3f3918e4cc113129361414bda.css" integrity="sha256-bammPSWpYIvKL3&#43;QegMOiHp908PzkY5MwRMSk2FBS9o=" rel="preload stylesheet" as="style">
<link rel="icon" href="http://localhost:1313/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:1313/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:1313/favicon-32x32.png">
<link rel="apple-touch-icon" href="http://localhost:1313/apple-touch-icon.png">
<link rel="mask-icon" href="http://localhost:1313/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<link rel="alternate" type="application/rss+xml" href="http://localhost:1313/posts/index.xml">
<link rel="alternate" hreflang="en" href="http://localhost:1313/posts/">
<noscript>
    <style>
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: rgb(29, 30, 32);
                --entry: rgb(46, 46, 51);
                --primary: rgb(218, 218, 219);
                --secondary: rgb(155, 156, 157);
                --tertiary: rgb(65, 66, 68);
                --content: rgb(196, 196, 197);
                --code-block-bg: rgb(46, 46, 51);
                --code-bg: rgb(55, 56, 62);
                --border: rgb(51, 51, 51);
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>
</head>

<body class="list" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="http://localhost:1313/" accesskey="h" title="My New Hugo Site (Alt + H)">My New Hugo Site</a>
            <div class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
            </div>
        </div>
        <ul id="menu">
            <li>
                <a href="http://localhost:1313/" title="首页">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="http://localhost:1313/about/" title="关于">
                    <span>关于</span>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main"> 
<header class="page-header"><div class="breadcrumbs"><a href="http://localhost:1313/">Home</a></div>
  <h1>
    Posts
  </h1>
</header>

<article class="post-entry"> 
  <header class="entry-header">
    <h2 class="entry-hint-parent">地址
    </h2>
  </header>
  <div class="entry-content">
    <p>读操作 CPU发送访问地址
判断是否命中
否
判断缓存是否已满 是
写操作 写直达法 写回法 Cache块退出时进行替换，将其写回主存 对希望替换的值进行上锁 地址映射表（位置在缓存中） 全相联地址映射 概念： 字块
过程： 划分字块
将主存和Cache划分出一部分大小相同，数量不等的字块
将字块进行编号，称为主存块号和Cache块号
主存块号的编写方式通过将地址分成两部分：块编号&#43;块内地址（字块）
Cache块号编写方式通过将Cache编号&#43;块内地址（字块）
构建地址映射表
缓存块号（共2^M^个） 主存块号（位数为N） V（有效位，大小为1） 0 20845H 1（已使用） 1 0 2 0 … … n 42851H 1 映射表的大小：(N&#43;1)*2^M^
缺点： 访问速度不平均
直接地址映射 过程： 划分存储
将主存以Cache容量大小划分出大小相同的区
将字块进行编号，称为区内块号
主存块号的编写方式通过将地址分为三部分：区号&#43;区内块号&#43;块内地址（字块）
Cache块号编写方式通过将Cache编号&#43;块内地址（字块）
构建地址映射表
（主存）区号（位数为N） （主存）区内块号 缓存块号（共2^M^个） V（有效位，大小为1） 20845H 0 0 1 1 1 0 2 2 0 … … … 42851H n n 1 缺点： 容易频繁替换
...</p>
  </div>
  <footer class="entry-footer"><span title='2024-05-03 12:00:00 +0800 CST'>May 3, 2024</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;83 words</footer>
  <a class="entry-link" aria-label="post link to 地址" href="http://localhost:1313/posts/%E5%9C%B0%E5%9D%80/"></a>
</article>

<article class="post-entry"> 
  <header class="entry-header">
    <h2 class="entry-hint-parent">React 学习
    </h2>
  </header>
  <div class="entry-content">
    <p>React 学习 第二节 卡片制作(jsx初步与css结合) 主要内容 目录结构:
Main.jsx:
import Card from &#34;./Card&#34; function App(){ return( &lt;&gt; &lt;Card/&gt; &lt;Card/&gt; &lt;Card/&gt; &lt;/&gt; ) } export default App Card.jsx:
import profilePic from &#39;./assets/MayCat.png&#39;; function Card(){ return ( &lt;div className=&#34;card&#34;&gt; &lt;img className=&#34;card-image&#34; src={profilePic} alt=&#34;Picture&#34;&gt;&lt;/img&gt; &lt;h2 className=&#39;card-title&#39;&gt;Kang Jay&lt;/h2&gt; &lt;p className=&#39;card-text&#39;&gt;Creater&lt;/p&gt; &lt;/div&gt; ) } export default Card; index.css:
.card { border: 1px solid hsla(0, 0%, 77%, 0.712); border-radius: 8px; box-shadow: 5px 5px 10px hsla(0, 0%, 72%, 0.712); padding: 20px; margin: 10px; text-align: center; max-width: 250px; display: inline-block; } .card .card-image { max-width: 60%; height: auto; border-radius: 50%; margin: 10px; } .card .card-title { font-family: Arial, Helvetica, sans-serif; color: hsl(0, 0%, 27%); margin: 10px 0; } .card .card-text { font-family: Arial, Helvetica, sans-serif; color: hsl(0, 0%, 41%); margin: 10px 0; } 结果展示 需要注意的细节 jsx文件中只能返回一个components, 注意用 &lt;&gt;&lt;/&gt; 包裹起来 jsx的本质是定义一个函数然后使用这个函数export出来的component 底层原理还有待考究~ jsx调用css里面的class需要使用className比如 &lt;img className=&#39;card-image&#39;&gt; css中边框从外到里是MBP: margin-&gt;border-&gt;padding(该元素与外界的距离-&gt;该元素边框-&gt;该元素与child的距离) css中 border-radius: 50% 变圆 css中 display: inline-block 是一个个可以自己控制大小的块, 而flex无法自己控制大小会按照父元素大小变化 总结 基础, 像拼积木
...</p>
  </div>
  <footer class="entry-footer"><span title='2024-05-02 12:00:00 +0800 CST'>May 2, 2024</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;778 words</footer>
  <a class="entry-link" aria-label="post link to React 学习" href="http://localhost:1313/posts/react-%E5%AD%A6%E4%B9%A0/"></a>
</article>

<article class="post-entry"> 
  <header class="entry-header">
    <h2 class="entry-hint-parent">My First Post
    </h2>
  </header>
  <div class="entry-content">
    <p>Introduction This is bold text, and this is emphasized text.
Visit the Hugo website!
这里是KangJay的欢迎页
</p>
  </div>
  <footer class="entry-footer"><span title='2024-05-01 12:00:00 +0800 CST'>May 1, 2024</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;15 words</footer>
  <a class="entry-link" aria-label="post link to My First Post" href="http://localhost:1313/posts/hello-world/"></a>
</article>
    </main>
    
<footer class="footer">
        <span>&copy; 2025 <a href="http://localhost:1313/">My New Hugo Site</a></span> · 

    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
        <path d="M12 6H0l6-6z" />
    </svg>
</a>

<script>
    let menu = document.getElementById('menu')
    if (menu) {
        menu.scrollLeft = localStorage.getItem("menu-scroll-position");
        menu.onscroll = function () {
            localStorage.setItem("menu-scroll-position", menu.scrollLeft);
        }
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
</body>

</html>
